<!--  -->
<template>
  <div id='compage'>
    <a-row>
      <a-col :span="24">
      <a-table
          bordered
          :columns="columns"
          :row-key="record => record.id"
          :data-source="cusTableList"
        >
        <template slot="status" slot-scope="status,list">
          <template>
            <a-button v-show="status == 0" @click="goShDialog(list.id)"><a-icon type="edit" />未审核</a-button>
            <a-button v-show="status == -1" type="danger">审核不通过</a-button>
            <a-button type="primary" v-show="status == 1">审核通过</a-button>
          </template>
          <!-- <a-switch disabled v-if="commend == 1" default-checked @click="changeCommenStatus(list.id)"  />
          <a-switch v-else @click="changeCommenStatus(list.id)"/> -->
        </template>
        <template slot="click" slot-scope="click">
          {{ Number((click / allClick)).toFixed(2) * 100 }}%
        </template>
      </a-table>
      </a-col>
    </a-row>
    <a-modal centered v-model="visible" title="审核" okText="同意" cancelText="不同意" @ok="handleOk(1)"  @cancel="handleOk(-1)">
      <p>是否通过</p>
    </a-modal>
  </div>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
import { getReqBook } from '@/api/api.js'
import { changeCommen, shbook } from '@/api/webapi.js'
const columns = [
  {
    title: '序号',
    customRender: (text, record, index) => `${index + 1}`,
    width: '70px'
  },
  {
    title: '申请书名',
    dataIndex: 'req_book'
  },
  {
    title: '申请书作者',
    dataIndex: 'req_author'
  },
  {
    title: '申请人',
    dataIndex: 'req_user_name'
  },
  {
    title: '同意',
    dataIndex: 'status',
    scopedSlots: { customRender: 'status' }
  }
]
export default {
// import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
  // 这里存放数据
    return {
      shcuuentid: null,
      visible: false,
      columns,
      show: true,
      cusTableList: [],
      allClick: 0
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    goShDialog (id) {
      this.shcuuentid = id
      this.visible = true
    },
    handleOk (isTg) {
      const obj = {
        status: isTg
      }
      shbook(this.shcuuentid, obj).then((res) => {
        if (res.code === 200) {
          this.loadCanvas()
          this.visible = false
        } else {
          this.$message.error('错误')
        }
      })
    },
    changeCommenStatus (id) {
      changeCommen(id).then((res) => {
        if (res.code === 200) {
          this.loadCanvas()
        } else {
          this.$message.error('切换失败')
        }
      })
    },
    async loadCanvas () {
      await getReqBook().then((res) => {
        if (res.code === 200) {
          this.cusTableList = res.data.list
        }
      })
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {
    this.loadCanvas()
    const that = this
    window.onresize = function () {
      that.resizeCanvas()
    }
  }
}
</script>
<style lang='less' scoped>
body,html{
background: #0f375f;
}
#compage{
width: 100%;
height: 100%;
}
.fatherCanvas{
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: space-around;
}
#main{
}
.tbimg{
width: 32px;
height: 45px;
}
</style>
